<template>
  <!-- 短信登录 -->
  <div class="smsContainer">
    <h1 class="title">短信登录</h1>
    <el-form-item label="手机号">
      <el-input maxlength="11" class="captcha phone" v-model="phoneNumber"></el-input>
      <span @click="sendSms" class="captcha-svg" v-text="msg"></span>
    </el-form-item>
    <el-form-item label="验证码">
      <el-input class="number" v-model="code"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">提交</el-button>
    </el-form-item>
  </div>
</template>
<script>
import * as api from '@/api/users'

export default {
  props: { //父传子
    storageUserInfo: {
      required: true
    }
  },
  data() {
    return {
      msg: '点击发送验证码',
      flag: true, //一个开关
      phoneNumber: '',
      code: ''//短信验证码
    }
  },
  methods: {
    async sendSms() {
      if (this.flag) {
        this.flag = false //关
        //调用接口，获取手机验证码
        let res = await api.getSmsCodeApi(this.phoneNumber)
        console.log(res)
        if (res.data.state) {
          //短信发送成功
          this.$message({
            type: 'success',
            message: '短信发送成功'
          })
        } else {
          this.$message.error(res.data.msg)
        }
        let delay = 5
        this.msg = `${delay}秒后重新发送`
        this.interval = setInterval(() => {
          delay--
          if (delay < 1) {
            this.msg = `点击发送验证码`
            clearInterval(this.interval)
            this.flag = true
          } else {
            this.msg = `${delay}秒后重新发送`
          }

        }, 1000)
      }
    },
    async submit() {
      let res = await api.smsLoginApi(this.code)
      console.log(res)
      //将内容存到本地 调用父组件的方法，储存用户信息
      this.storageUserInfo(res.data)
      //跳转到页面Home
      this.$router.push('/Home')
    }
  }
}
</script>

<style lang="less" scoped>
.number {
  width: 250px;
  height: 40px;
}

.el-button {
  width: 250px;
  height: 40px;
}

/deep/.el-form-item__label {
  color: #fff;
}

.captcha {
  border: 0;
  width: 125px;
  height: 40px;

  /deep/.el-input__inner {
    border-radius: 0;
    border-right: none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border: 0;

    //
  }
}


.captcha-svg {
  display: inline-block;

  width: 125px;
  height: 40px;
  color: #888;
  text-align: center;
  background-color: #fff;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  vertical-align: middle;
  margin-bottom: 1.5px;
  font-weight: bolder;
  text-decoration: underline;
  user-select: none; //双击验证码不会被选中
}

.title {
  font-size: 30px;
  text-align: center;
  margin-bottom: 30px;
  color: #fff;
}
</style>
